<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>指令语法</title>
  </head>
  <body>
    <div id="app">
      <input type="text" v-bind:value="message" />
    </div>
    <script src="./js/vue.js"></script>
    <script>
      /* 
        指令语法：
          v-bind： 单向数据绑定（给标签/元素绑定动态的值）
          语法：v-bind:标签名:"属性名" 
          v-model： 双向数据绑定（常用于表单元素）
          单向和双向：
            单向：数据只能由js(数据层)流向html(视图层
                  如果修改html(视图层)数据，js(数据层)是不变的
            双向：数据能由js(数据层)流向html(视图层)
                  数据能由html(视图层)流向js(数据层)
      */
      const vm = new Vue({
        data: {
          message: "hello",
        },
        
      });
      vm.$mount("#app");
    </script>
  </body>
</html>
